<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8"/>
    <title>媒体位</title>
    <meta name="description" content="overview & stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="static/css/ace.min.css"/>
    <link rel="stylesheet" href="static/css/ace-responsive.min.css"/>
    <link rel="stylesheet" href="static/css/ace-skins.min.css"/>
    <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
    <!--提示框-->
    <script type="text/javascript" src="static/js/jquery.tips.js"></script>
</head>

<script type="text/javascript">
    $(function () {
        top.hangge();

        $("#type").change(function () {
            var type = $(this).val();
            if (type == 1 || type == 2) {
                $(".imgUrlControl").css("display", "block");
                $(".imgUrlControl").find(":input").attr("disabled", false);
            } else {
                $(".imgUrlControl").css("display", "none");
                $(".imgUrlControl").find(":input").attr("disabled", true);
            }
        });

        $("#skipType").change(function () {
            var type = $(this).val();
            if (type == 2) {
                $(".smallProgramControl").css("display", "block");
                $(".gzhControl").css("display", "none");
                $(".advertSDKControl").css("display", "none");
                $(".smallProgramControl").find(":input").attr("disabled", false);
                $(".gzhControl").find(":input").attr("disabled", true);
                $(".advertSDKControl").find(":input").attr("disabled", true);
            } else if (type == 3) {
                $(".smallProgramControl").css("display", "none");
                $(".gzhControl").css("display", "block");
                $(".advertSDKControl").css("display", "none");
                $(".smallProgramControl").find(":input").attr("disabled", true);
                $(".gzhControl").find(":input").attr("disabled", false);
                $(".advertSDKControl").find(":input").attr("disabled", true);
            } else if (type == 4) {
                $(".smallProgramControl").css("display", "none");
                $(".gzhControl").css("display", "none");
                $(".advertSDKControl").css("display", "block");
                $(".smallProgramControl").find(":input").attr("disabled", true);
                $(".gzhControl").find(":input").attr("disabled", true);
                $(".advertSDKControl").find(":input").attr("disabled", false);
            } else {
                $(".smallProgramControl").css("display", "none");
                $(".gzhControl").css("display", "none");
                $(".advertSDKControl").css("display", "none");
                $(".smallProgramControl").find(":input").attr("disabled", true);
                $(".gzhControl").find(":input").attr("disabled", true);
                $(".advertSDKControl").find(":input").attr("disabled", true);
            }
        });

    });


    //保存
    function save() {
        var title = $("#title").val();
        if (title == "") {
            $("#title").tips({
                side: 3,
                msg: '请输入标题',
                bg: '#AE81FF',
                time: 2
            });
            $("#title").focus();
            return false;
        }
        if ($("#index").val() == "") {
            $("#index").tips({
                side: 3,
                msg: '请输入媒体位顺序',
                bg: '#AE81FF',
                time: 2
            });
            $("#index").focus();
            return false;
        }
        if ($("#link").val() == "") {
            $("#link").tips({
                side: 3,
                msg: '请输入跳转链接',
                bg: '#AE81FF',
                time: 2
            });
            $("#link").focus();
            return false;
        }
        var type = $("#type").val();
        if ($("#type").val() == "") {
            $("#type").tips({
                side: 3,
                msg: '请选择媒体位类型',
                bg: '#AE81FF',
                time: 2
            });
            $("#type").focus();
            return false;
        }
        if (type == 1 || type == 2) {
            var imgUrlFile = $("#imgUrlFile").get(0).files[0];
            if (!imgUrlFile) {
                $("#imgUrlFile").tips({
                    side: 3,
                    msg: '请选择图片上传',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#imgUrlFile").focus();
                return false;
            }
        }
        var skipType = $("#skipType").val();
        if (skipType == "") {
            $("#skipType").tips({
                side: 3,
                msg: '请选择跳转方式',
                bg: '#AE81FF',
                time: 2
            });
            $("#skipType").focus();
            return false;
        }
        if (skipType == 2) {
            if ($("#smallProgramId").val() == "") {
                $("#smallProgramId").tips({
                    side: 3,
                    msg: '请输入小程序ID',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#smallProgramId").focus();
                return false;
            }
        } else if (skipType == 3) {
            var includeQRcodeImageFile = $("#includeQRcodeImageFile").get(0).files[0];
            if (!includeQRcodeImageFile) {
                $("#includeQRcodeImageFile").tips({
                    side: 3,
                    msg: '请选择二维码上传',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#includeQRcodeImageFile").focus();
                return false;
            }
            var bottomBtnImageFile = $("#bottomBtnImageFile").get(0).files[0];
            if (!bottomBtnImageFile) {
                $("#bottomBtnImageFile").tips({
                    side: 3,
                    msg: '请选择跳转按钮上传',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#bottomBtnImageFile").focus();
                return false;
            }
            if ($("#jumpTipsWords").val() == "") {
                $("#jumpTipsWords").tips({
                    side: 3,
                    msg: '请输入跳转提示语',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#jumpTipsWords").focus();
                return false;
            }
        } else if (skipType == 4) {
            if ($("#advertFirm").val() == "") {
                $("#advertFirm").tips({
                    side: 3,
                    msg: '请输入广告商',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#advertFirm").focus();
                return false;
            }
        }
        //提交
        $("#menuForm").submit();
        $("#zhongxin").hide();
        $("#zhongxin2").show();
    }

    //展示图片
    function showImg(obj, type) {
        if ($(obj).context.files) {
            if (type == 1) {
                document.getElementById("imgUrl").src = window.URL.createObjectURL($(obj).context.files[0]);
            } else if (type == 2) {
                document.getElementById("includeQRcodeImage").src = window.URL.createObjectURL($(obj).context.files[0]);
            } else if (type == 3) {
                document.getElementById("bottomBtnImage").src = window.URL.createObjectURL($(obj).context.files[0]);
            }
        }
    }

</script>

<body>
<form action="advert/add" name="menuForm" id="menuForm" method="post" enctype="multipart/form-data">
    <div id="zhongxin" class="zhongxin-cla">
        <table>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>标题：</span>
                    <input type="text" name="title" id="title" placeholder="标题"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>媒体位顺序：</span>
                    <input type="number" name="index" id="index"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>跳转链接：</span>
                    <input type="text" name="link" id="link" placeholder="跳转链接"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>媒体位类型：</span>
                    <select class="input_txt" name="type" id="type" style="vertical-align:top;width: 150px;">
                        <option value="">选择媒体位类型</option>
                        <option value="-2">悬浮媒体位</option>
                        <option value="1">首页banner</option>
                        <option value="2">贴心服务专区</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="imgUrlControl" style="display: none">
                        <font color='red'>*</font>
                        <span>图片：</span>
                        <span>
								<input type="file" name="imgUrlFile" id="imgUrlFile" onchange="showImg(this, 1)">
								<img id="imgUrl" src="" style="height: 100px;width: 100px">
							</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>跳转方式：</span>
                    <select class="input_txt" name="skipType" id="skipType" style="vertical-align:top;width: 150px;">
                        <option value="">选择跳转方式</option>
                        <option value="1">内部跳转</option>
                        <option value="2">小程序</option>
                        <option value="3">公众号</option>
                        <option value="4">广告SDK</option>
                        <option value="5">deeplink</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>显示的APP：</span>
                    <select class="input_txt" name="showAppType" id="showAppType" style="vertical-align:top;width: 150px;">
                        <option value="1">赛诺</option>
                        <option value="0">e路相伴</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="smallProgramControl" style="display: none">
                        <font color='red'>*</font>
                        <span>小程序ID：</span>
                        <input type="text" name="smallProgramId" id="smallProgramId" placeholder="小程序原始ID"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="smallProgramControl" style="display: none">
                        <span>小程序路径：</span>
                        <input type="text" name="smallProgramPath" id="smallProgramPath" placeholder="小程序跳转路径"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="gzhControl" style="display: none">
                        <font color='red'>*</font>
                        <span>二维码：</span>
                        <span>
								<input type="file" name="includeQRcodeImageFile" id="includeQRcodeImageFile"
                                       onchange="showImg(this, 2)">
								<img id="includeQRcodeImage" src="" style="height: 100px;width: 100px">
							</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="gzhControl" style="display: none">
                        <font color='red'>*</font>
                        <span>跳转按钮：</span>
                        <span>
								<input type="file" name="bottomBtnImageFile" id="bottomBtnImageFile"
                                       onchange="showImg(this, 3)">
								<img id="bottomBtnImage" src="" style="height: 100px;width: 100px">
							</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="gzhControl" style="display: none">
                        <font color='red'>*</font>
                        <span>跳转提示语：</span>
                        <input type="text" name="jumpTipsWords" id="jumpTipsWords" placeholder="跳转提示语"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="advertSDKControl" style="display: none">
                        <font color='red'>*</font>
                        <span>广告商：</span>
                        <input type="text" name="advertFirm" id="advertFirm" placeholder="广告商"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding-top: 10px;">
                    <a class="btn btn-mini btn-primary" onclick="save();">保存</a>
                    <a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="zhongxin2" class="center" style="display:none">
        <br/><br/><br/><img src="static/images/jiazai.gif"/><br/>
        <h4 class="lighter block green"></h4>
    </div>
</form>
</body>
</html>